<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS显示模式</title>
        <style>
            div {
                width: 50px;
                height: 50px;
                border: 5px solid mediumaquamarine;
                /*显示模式：块级元素
                特点：竖着排 可以设置宽高*/
                display: block;
            }
            span {
                background-color: lightpink;
                width: 200px;
                height: 30px;
                /*显示模式：行内元素
                特点：横着排 不可以设置宽高 大小是靠内容撑起来的*/
                display: inline;
                /* 元素的显示模式可以修改*/
                display: block;
            }
            input,button{
                width: 50px;
                height: 50px;
                /* 行内块元素：既能横着排，又可以设置宽高*/
                display: inline-block;
            }
            .d2:hover {
                /*悬停时，修改元素的显示模式为消失
                会释放此元素在文档流中占据的页面布局空间*/
                display: none;
            }
        </style>
    </head>
    <body>
        <!--    .d*3 Tab补全    -->
        <div class="d1">111</div>
        <div class="d2">222</div>
        <div class="d3">333</div>
        <hr>
        <span>123456789</span>
        <span>123456789</span>
        <span>123456789</span>
        <hr>
        <input type="text" style="background-color: dimgrey">
        <input type="text" style="background-color: dimgrey">
        <input type="text" style="background-color: dimgrey">
        <button>按钮</button>
    </body>
</html>